<template>
  <div class="home">
    <div class="top">
      <h1>后台管理系统</h1>
      <div>
        当前用户：
        <p>{{ username }}</p>
        <el-button @click="loginOut">退出登录</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="slide">
        <el-menu
          :router="true"
          default-active="users"
          class="el-menu-vertical-demo"
          :unique-opened="true"
          background-color="orange"
          text-color="#fff"
        >
          <el-sub-menu v-for="item in limitList" :key="item.id" :index="item.id + ' '">
            <template #title>
              <!-- <el-icon><location /></el-icon> -->
              <span>{{ item.authName }}</span>
            </template>
              <el-menu-item v-for="son in item.children" :key="son.id" :index= "son.path">{{ son.authName }}</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'oaHome',
  data () {
    return {
      username: '',
      limitList: []
    }
  },
  methods: {
    async getInfoUser () {
      const id = window.sessionStorage.getItem('user_id')
      const res = await this.$http.get(`users/${id}`)
      if (res.meta.status !== 200) return
      this.username = res.data.username
    },
    loginOut () {
      ElMessage({
        showClose: true,
        message: '退出成功！',
        type: 'success'
      })
      window.sessionStorage.clear()
      window.location.reload()
    },
    async getList () {
      const res = await this.$http.get('menus')
      if (res.meta.status !== 200) return
      this.limitList = res.data
    }
  },
  created () {
    this.getInfoUser()
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1100px;
  >.top {
    height: 80px;
    width: 100%;
    background-color: skyblue;
    display: flex;
    justify-content: space-around;
    align-items: center;
    h1{
      margin-left: 500px;
    }
    >div {
      display: flex;
      align-items: center;
      margin-left: 100px;
      >p{
        color: red;
        font-size: 20px;
        margin-right: 10px;
      }
    }
  }
  >.bottom {
    flex: 1;
    display: flex;
    overflow: hidden;
    >.slide {
      width: 200px;
      background-color: yellow;
      .el-col-12{
        max-width: 100%;
      }
    }
    >.content {
      flex: 1;
      box-sizing: border-box;
      padding: 15px;
      overflow: auto;
    }
  }
}
</style>
